{# Heredando la plantilla principal #}

{% extends 'default.html' %}
{% use 'navegacion.html' %}
{% use 'loginUsuario.html' %}

{% block contenidos %}
<section style="margin-top:50px">
	<div class="hero-unit">
	  <h1>Nueva DDJJ</h1>
  </div>
	 <div class="hero-unit" style="font-size:14px">
		<form id="nuevaDDJJ" name="nuevaDDJJ"  method="post" action="grabarnuevaDDJJ.php?activo={{empleadosActivos|length}}&baja={{empleadosBaja|length}}">
			<legend> Seleccione Periodo a Declarar </legend>
			<table border="0">
              <tr>
                <td><label for="anio">A&ntilde;o</label>
                  <span></span> 	
				  <select id="anio" name="anio" class="{required:true}" onchange="ComponerLista(document.forms.nuevaDDJJ.anio[selectedIndex].value);">	
					{% for anio in anios %}
						<option value="{{ anio.codigo }}">{{ anio.anio }}</option>
					{% endfor %}			
                  </select>               
			   </td>
                <td><label for="mes">Mes</label>
                  <span></span>
                  <select id="mes" name="mes" class="{required:true}" onchange="formReset(document.forms.nuevaDDJJ.mes[selectedIndex].value);">
                    <option value="">Seleccionar</option>
                  </select>
			    </td>
				 <td width="10px"></td> 
				 <td><span id="mensajeNoRem" style="text-align:justify; font-size:12px; font-style:italic"></span></td>
              </tr>
          </table>
			<legend> Remuneraci&oacute;n Empleados </legend>
			<legend style="color:#339900">Activos ({{ empleadosActivos|length }})</legend>
			{% if empleadosActivos|length > 0 %}
			<table id="activos" class="table table-striped table-condensed">
			  <thead>
				<tr>
				  <th><div align="center">CUIL</div></th>
				  <th><div align="center">Apellido y Nombre</div></th>
				  <th><div align="center">Documento</div></th>
				  <th><div align="center">Remuneracion</div></th>
				  <th id="thalicuota" class="hide"><div align="center">Alicuota</div></th>
				  <th><div align="center">Art.32 <br /> 
				  0,6%</div></th>
				  <th><div align="center">Art.32 <br /> 
				  bis 1%</div></th>
				  <th><div align="center">Art.32 <br /> 
				  bis 1,5%</div></th>
				  <th><div align="center">Total</div></th>
				</tr>
			  </thead>
			   <tbody>					
				{% for empleado in empleadosActivos %}
					<tr>
						<td><input type="text" id="activo{{empleado.nrcuil}}" name="activo{{empleado.nrcuil}}" style="width: 80px; text-align:right" value="{{ empleado.nrcuil }}" readonly/></td>
						<td>{{ empleado.apeynombre }}</td>
						<td>{{ empleado.tipoydoc }}</td>
						<td><span id="spanremu{{empleado.nrcuil}}"></span><input type="text" id="remu{{empleado.nrcuil}}" value="0.00" name="remu{{empleado.nrcuil}}" class="{number:true, required:true, min: 0} span2" onchange="CalcularPorcentajes(this.value, {{empleado.nrcuil}});"/></td>
						<td class="hide" id="alicTd{{empleado.nrcuil}}">
							<input type="text" id="alic{{empleado.nrcuil}}" style="text-align:right" name="alic{{empleado.nrcuil}}" value="0.00" class="span1" readonly/>
						</td>
						<td><input type="text" id="por6{{empleado.nrcuil}}" style="text-align:right" name="por6{{empleado.nrcuil}}" class="span1" readonly/></td>
						<td><input type="text" id="por1{{empleado.nrcuil}}" style="text-align:right" name="por1{{empleado.nrcuil}}" class="span1" readonly/></td>
						<td><input type="text" id="por15{{empleado.nrcuil}}" style="text-align:right" name="por15{{empleado.nrcuil}}" class="span1" readonly/></td>
						<td><input type="text" id="totemp{{empleado.nrcuil}}" style="text-align:right"name="totemp{{empleado.nrcuil}}" class="span1" readonly/></td>
					</tr>
				{% endfor %}
				<tr>
					<td></td>
					<td></td>
					<td valign="bottom"><div align="right"><strong>Totales</strong></div></td>
					<td><input type="text" id="totrem" style="text-align:right" name="totrem" class="span2" readonly/></td>
					<td class="hide" id="tdtotalic"><input type="text" id="totalic" style="text-align:right" name="totalic" class="span1" readonly/></td>
					<td><input type="text" id="tot6" style="text-align:right" name="tot6" class="span1" readonly/></td>
					<td><input type="text" id="tot1" style="text-align:right" name="tot1" class="span1" readonly/></td>
					<td><input type="text" id="tot15" style="text-align:right" name="tot15" class="span1" readonly/></td>
					<td><input type="text" id="total" style="text-align:right" name="total" class="span1" readonly/></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td valign="bottom"><div align="right"><strong>Recargo</strong></div></td>
					<td colspan="4"><input type="text" id="motRec" name="motRec" class="span5" placeholder="Motivo del Recargo" /></td>
					<td><span></span><input type="text" id="recargo" value="0.00" name="recargo" placeholder="Importe"  class="{number:true, min: 0} span1" onchange="recalcularTotal();"/></td>
				</tr>
				<tr>
					<td colspan="9"><div style="text-align:right" id="errorTotal" class="inner"></div><td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td id="totalgeneral" class="hide"></td>
					<td valign="bottom"><div align="right"><strong>Total</strong></div></td>
					<td><input type="text" id="totalGeneral" name="totalGeneral" style="text-align:right" class="span1" readonly/></td>
				</tr>				
			   </tbody>	
	  		</table>
			{% else %}
				<h4> No hay empleados activos actualmente </h4>
			{% endif %}
			<legend style="color:#FF0000">Inactivos ({{ empleadosBaja|length }})</legend>
			{% if empleadosBaja|length > 0 %}
			<table id="inactivos" class="table table-striped">
			  <thead>
				<tr>
				  <th><div align="center">CUIL</div></th>
				  <th><div align="center">Apellido y Nombre</div></th>
				  <th><div align="center">Documento</div></th>
				  <th><div align="center">Motivo de Inactividad</div></th>
				</tr>
			  </thead>
			   <tbody>	
				{% for empleado in empleadosBaja %}
					<tr>
					  <td><input type="text" id="baja{{empleado.nrcuil}}" style="width: 80px; text-align:right" name="baja{{empleado.nrcuil}}" value="{{ empleado.nrcuil }}" readonly /></td>
					  <td>{{ empleado.apeynombre }}</td>
					  <td>{{ empleado.tipoydoc }}</td>
					  <td><input type="text" id="motivo{{empleado.nrcuil}}" name="motivo{{empleado.nrcuil}}" class="span6"/></td>
					</tr>
				{% endfor %}
			   </tbody>	
	  		</table>
			{% else %}
				<h4> No hay empleados inactivos actualmente </h4>
			{% endif %}
	  <p><button id="guardar" name="guardar" type="submit" class="btn btn-primary">Generar Nueva DDJJ</button></p>
	  </form>
	</div>
</section>
{% endblock %}
{% block cssPropios %}
	<link rel="stylesheet" href="css/tablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
{% endblock %}
{% block javaScripts %}
	<script type="text/javascript" src="lib/js/jquery-validation-1.10.0/jquery.metadata.js"></script>
	<script type="text/javascript" src="lib/js/jquery-validation-1.10.0/jquery.validate.min.js"></script>
	<script type="text/javascript" src="lib/js/jquery-validation-1.10.0/localization/messages_es.js"></script>
	<script type="text/javascript" src="lib/js/jquery-tablesorter/jquery.tablesorter.js"></script>
	<script type="text/javascript" src="lib/js/jquery-tablesorter/jquery.metadata.js"></script>
	<script type="text/javascript" src="lib/js/jquery/jquery.blockUI.js"></script>
	<script type="text/javascript" src="lib/js/funcionControl.js"></script>
	<script>
		var valorextra = 0;
		var tipoextra = 1;
		var retiene060 = 1;
		var retiene100 = 1;
		var retiene150 = 1;
		var minimoBoleta = 0;
		if ("{{minimoAutorizado}}" == 1) {
			minimoBoleta = 40;
		} else {
			minimoBoleta = 100;
		}
			
		function MsgWait() {
			$.blockUI({ message: "<h1>Grabando DDJJ <br> Puede demorar unos minutos.</h1>" });
			return true;
		}
		
		function formReset(periodo) {
			var nombreRemu;
			var spanRemu;
			if ("{{minimoAutorizado}}" == 1) {
				minimoBoleta = 40;
			} else {
				minimoBoleta = 100;
			}
			retiene060 = 1;
			retiene100 = 1;
			retiene150 = 1;
			//Vacio las remu y el span de error y recaolculo los poscentajes con 0 para vaciar los porcentajes.
			{% for activos in empleadosActivos %}
				var cuil = "{{activos.nrcuil}}";
				nombreRemu = "remu"+cuil;
				spanRemu = "spanremu"+cuil;
				
				var defaultRemu = 0.0
				document.getElementById(nombreRemu).value = parseFloat(defaultRemu).toFixed(2);
				nominputalic = "alic"+cuil;
				var defaultAlic = 0.0
				document.getElementById(nominputalic).value = parseFloat(defaultAlic).toFixed(2);
				
				document.getElementById(spanRemu).innerHTML = "";
				document.getElementById(nombreRemu).readOnly = false;
				CalcularPorcentajes(defaultRemu,cuil);
			{% endfor %}
			var defaultRecarg = 0.0
			document.getElementById("recargo").value = parseFloat(defaultRecarg).toFixed(2);
			formatoFormulario(periodo);
			cargarExtraordinario();
			recalcularSubTotales();
			recalcularTotal();
			
		}
	
		function formatoFormulario(periodo){
			var nombrealic;
			var clase = "";
			var colum = 5;
			
			if (periodo <= 12) {
				clase = "hide";
				colum = 4;
				mensaje = "";
			}	
				
			document.getElementById("thalicuota").className = clase;
			{% for activos in empleadosActivos %}
				var cuil = "{{activos.nrcuil}}";
				nombrealic = "alicTd"+cuil;
				document.getElementById(nombrealic).className = clase;
			{% endfor %}
			document.getElementById("tdtotalic").className = clase;
			if (periodo != 0) {
				document.getElementById("mensajeNoRem").className = clase; 
			}
			
			var numFila = parseInt({{ empleadosActivos|length }}) + 2;
			var fila=document.getElementById("activos").rows[numFila].cells
   			fila[3].colSpan=colum;
			document.getElementById("totalgeneral").className = clase;
		}
		
		function cargarExtraordinario() {
			periodo = document.getElementById("mes").value;
			anio = document.getElementById("anio").value;
			if (periodo > 12) {
				{% for extra in extraordinario %}
					var extraanio = "{{ extra.anio }}";
					var extrames = "{{ extra.mes }}";
					if (extraanio == anio && extrames == periodo) {
						tipoextra = "{{ extra.tipo }}";
						valorextra = "{{ extra.valor }}";
						retiene060 = "{{ extra.retiene060 }}";
						retiene100 = "{{ extra.retiene100 }}";
						retiene150 = "{{ extra.retiene150 }}";
						mensaje = "{{ extra.mensaje }}";
						document.getElementById("mensajeNoRem").innerHTML = mensaje;
						minimoBoleta = minimoBoleta.toFixed(2) * parseFloat(valorextra).toFixed(3);
						if (tipoextra == 0) {
							minimoBoleta = 0;
							cargarFijo(valorextra);
						}
						if (tipoextra == 2) {
							minimoBoleta = 0;
							cargarContribucion(valorextra);
						}
					} 
				{% endfor %}
			}
		}
		
		function cargarContribucion(valorextra) {
			{% for activos in empleadosActivos %}
				var cuil = "{{activos.nrcuil}}";
				nombreRemu = "remu"+cuil;
				valorextra = parseFloat(valorextra).toFixed(2);
				document.getElementById(nombreRemu).value = valorextra;
				document.getElementById(nombreRemu).readOnly = true;
				nombreRemu = "totemp"+cuil;
				document.getElementById(nombreRemu).value = valorextra;
				formatoFormulario(0);
			{% endfor %}
		}
		
		function cargarFijo(valorextra) {
			{% for activos in empleadosActivos %}
				var cuil = "{{activos.nrcuil}}";
				nombreRemu = "remu"+cuil;
				valorextra = parseFloat(valorextra).toFixed(2);
				document.getElementById(nombreRemu).value = valorextra;
				CalcularPorcentajes(valorextra,cuil);
				document.getElementById(nombreRemu).readOnly = true;
				formatoFormulario(0);
			{% endfor %}
		}
	
		function CalcularPorcentajes(remu, cuil){ 
			periodo = document.getElementById("mes").value;
			if (periodo > 12) {
				if (tipoextra == 1) {
					var nombreali = "alic"+cuil;
					remu = (parseFloat(remu) * parseFloat(valorextra)).toFixed(2);
					document.getElementById(nombreali).value = remu;
				}
			}
			
			var por6  = 0;
			var por1  = 0;
			var por15 = 0;
			if (retiene060 == 1) {
				por6 = (remu * 0.006).toFixed(2);
			} else {
				por6 = 0.0;
			}
			if (retiene100 == 1) {
				por1 = (remu * 0.01).toFixed(2);
			} else  {
				por1 = 0.0
			}
			if (retiene150 == 1) {
				por15 = (remu * 0.015).toFixed(2);
			} else {
				por15 = 0.0;
			}
			
			var totemp = (parseFloat(por6) + parseFloat(por1) + parseFloat(por15)).toFixed(2);
			var nombrePor6 = "por6"+cuil;
			var nombrePor1 = "por1"+cuil;
			var nombrePor15 = "por15"+cuil;
			var nombreTotEmp = "totemp"+cuil;
			document.getElementById(nombrePor6).value = por6;
			document.getElementById(nombrePor1).value = por1;
			document.getElementById(nombrePor15).value = por15;
			document.getElementById(nombreTotEmp).value = totemp;	
			recalcularSubTotales();
			recalcularTotal();
		}

		function recalcularSubTotales(){
			var nombreRemu;
			var nombreAlic;
			var nombrePor6;
			var nombrePor1;
			var nombrePor15;
			var nombreTotEmp;
			var totPor6 = 0; 
			var totPor1 = 0;  
			var totPor15 = 0; 
			var totEmp = 0;
			var totRem = 0;
			var totAli = 0;
			
			{% for activos in empleadosActivos %}
				var cuil = "{{activos.nrcuil}}";
				nombreRemu = "remu"+cuil;
				nombreAlic = "alic"+cuil;
				nombrePor6 = "por6"+cuil;
				nombrePor1 = "por1"+cuil;
				nombrePor15 = "por15"+cuil;
				nombreTotEmp = "totemp"+cuil;
				
				var remu = document.getElementById(nombreRemu).value;
				if (remu != "") {
					totRem = (parseFloat(totRem) + parseFloat(remu)).toFixed(2);
				}
				
				var alic = document.getElementById(nombreAlic).value;
				if (alic != "") {
					totAli = (parseFloat(totAli) + parseFloat(alic)).toFixed(2);
				}
				
				var por6 = document.getElementById(nombrePor6).value;
				if (por6 != "") {
					totPor6 = (parseFloat(totPor6) + parseFloat(por6)).toFixed(2);
				}
				
				var por1 = document.getElementById(nombrePor1).value;
				if (por1 != "") {
					totPor1 = (parseFloat(totPor1) + parseFloat(por1)).toFixed(2);
				}
				
				var por15 = document.getElementById(nombrePor15).value;
				if (por15 != "") {
					totPor15 = (parseFloat(totPor15) + parseFloat(por15)).toFixed(2);
				}
				
				var emple = document.getElementById(nombreTotEmp).value;
				if (emple != "") {
					totEmp = (parseFloat(totEmp) + parseFloat(emple)).toFixed(2);
				}
				
			{% endfor %}
			document.getElementById("totrem").value = totRem;	
			document.getElementById("totalic").value = totAli;	
			document.getElementById("tot6").value = totPor6;	
			document.getElementById("tot1").value = totPor1;
			document.getElementById("tot15").value = totPor15;
			document.getElementById("total").value = totEmp;
		}
		
		function recalcularTotal(){
			document.getElementById("errorTotal").innerHTML = '';
			var total = document.getElementById("total").value;
			if (total == "") {
				total = 0;
			}
			var recargo = document.getElementById("recargo").value;
			if (recargo == "") {
				recargo = 0;
			}
			var totalGeneral = (parseFloat(total) + parseFloat(recargo)).toFixed(2);
			document.getElementById("totalGeneral").value = totalGeneral;
		}
		
		function superaMinimoBoleta(total) {
			if (parseFloat(total) < parseFloat(minimoBoleta)) {
				return false;
			}
			return true;
		}
		
		$.validator.addMethod("superaminimo", superaMinimoBoleta);
		$.validator.addMethod("validaporcentajes", validarPorcentajes);
		$(function(){
			$('#nuevaDDJJ').validate({
				rules: {
            		totalGeneral: { superaminimo: true, validaporcentajes: true, required: true},
        		},
				messages: {
            		totalGeneral: 'El total no supera el minimo estipulado para este periodo o hay un error en los porcentajes calculados. Revise las remuneraciones y sus respectivos aportes',
        		},
				submitHandler: function(){		
					MsgWait();
					form.submit();  
				},
				errorPlacement: function(error, element){
					if (element.attr("id") == "totalGeneral") {
     					error.appendTo(".inner");
   					} else {
     					error.appendTo(element.prev("span").append());
    				}
				}
			});
		});
		
		function ComponerLista(anio) {
			document.forms.nuevaDDJJ.anio.disabled = true;
			document.forms.nuevaDDJJ.mes.length = 0;			
			cargarPeriodos(anio);
		}
		
		function cargarPeriodos(anio) {
			var o
			document.forms.nuevaDDJJ.mes.disabled=true;
			o = document.createElement("OPTION");
			o.text = 'Seleccionar';
			o.value = '';
			document.forms.nuevaDDJJ.mes.options.add(o);			
			{% for mes in meses %}
				if (anio == "{{ mes.anio }}") {
					o = document.createElement("OPTION");
					o.text = "{{ mes.descrip }}";
					o.value = "{{ mes.mes }}";
					document.forms.nuevaDDJJ.mes.options.add(o);	
				}
			{% endfor %}
			document.forms.nuevaDDJJ.mes.disabled=false;
			document.forms.nuevaDDJJ.anio.disabled=false;
			formReset(0);
		}
		
		function validarPorcentajes() {
			var remu = 0;
			var apo06 = 0;
			var apo10 = 0;
			var apo15 = 0;
			{% for activos in empleadosActivos %}
				var cuil = "{{activos.nrcuil}}";
				nombreRemu = "remu"+cuil;
				remu = document.getElementById(nombreRemu).value;
				nombrePor6 = "por6"+cuil;
				apo06 = document.getElementById(nombrePor6).value;
				nombrePor1 = "por1"+cuil;
				apo10 = document.getElementById(nombrePor1).value;
				nombrePor15 = "por15"+cuil;
				apo15 = document.getElementById(nombrePor15).value;
				if (remu != 0 && apo06 == 0 && retiene060 == 1) {
					return false;
				}
				if (remu != 0 && apo10 == 0 && retiene100 == 1) {
					return false;
				}
				if (remu != 0 && apo15 == 0 && retiene150 == 1) {
					return false;
				}
			{% endfor %}
			return true;
		}
		 
	</script>
{% endblock %}	